<template>
  <nav
    class="bg-gradient-to-r from-blue-600 to-teal-500 shadow-md fixed w-full z-20 top-0 left-0 transition-all duration-300"
    :class="isScrolled ? 'py-2 shadow-lg' : 'py-4'">
    <div class="container mx-auto px-4">
      <div class="flex justify-between h-16 items-center">
        <!-- Logo 部分 -->
        <div class="flex items-center">
          <a href="/" class="flex items-center">
            <img src="@/assets/svg/logo.svg" alt="Logo"
              class="h-8 w-auto mr-2 transition-transform duration-300 hover:scale-110">
            <span class="text-xl font-bold text-white">全栈开发工程师</span>
          </a>
        </div>

        <!-- 桌面端下拉菜单 -->
        <div class="hidden md:flex items-center space-x-1">
          <template v-for="item in menuItems" :key="item.id">
            <!-- 无下拉菜单的菜单项 -->
            <div v-if="!item.hasSubMenu" class="relative group">
              <a :href="item.path"
                class="text-white hover:text-blue-100 px-3 py-2 text-sm font-medium transition-colors duration-300 flex items-center">
                {{ item.name }}
              </a>
            </div>

            <!-- 有下拉菜单的菜单项 -->
            <div v-else class="relative group">
              <button
                class="text-white hover:text-blue-100 px-3 py-2 text-sm font-medium transition-colors duration-300 flex items-center">
                {{ item.name }}
                <svg class="ml-1 w-4 h-4 transition-transform duration-300 group-hover:rotate-180" fill="none"
                  stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                </svg>
              </button>
              <!-- 下拉菜单内容 -->
              <div
                class="absolute left-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-50 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all duration-300 transform origin-top scale-95 group-hover:scale-100">
                <a v-for="subItem in item.subMenu" :key="subItem.id" :href="subItem.path"
                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors duration-200">
                  {{ subItem.name }}
                </a>
              </div>
            </div>
          </template>
        </div>

        <!-- 移动端菜单按钮 -->
        <div class="md:hidden flex items-center">
          <button @click="toggleMenu"
            class="text-white hover:text-blue-100 focus:outline-none transition-transform duration-300"
            :class="isMenuOpen ? 'rotate-90' : ''">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
            </svg>
          </button>
        </div>
      </div>

      <!-- 移动端下拉菜单 -->
      <div v-if="isMenuOpen"
        class="md:hidden bg-white rounded-b-lg shadow-lg mt-1 overflow-hidden transition-all duration-300 ease-in-out transform origin-top">
        <div class="flex flex-col space-y-1 py-2">
          <template v-for="item in menuItems" :key="item.id">
            <!-- 无下拉菜单的移动端菜单项 -->
            <a v-if="!item.hasSubMenu" :href="item.path"
              class="text-blue-600 hover:bg-blue-50 px-4 py-3 text-sm font-medium transition-colors duration-300"
              @click="toggleMenu">
              {{ item.name }}
            </a>

            <!-- 有下拉菜单的移动端菜单项 -->
            <div v-else class="relative">
              <button @click="toggleSubMenu(item.id)"
                class="w-full text-left text-blue-600 hover:bg-blue-50 px-4 py-3 text-sm font-medium transition-colors duration-300 flex justify-between items-center">
                {{ item.name }}
                <svg class="w-4 h-4 transition-transform duration-300" :class="subMenuOpen[item.id] ? 'rotate-180' : ''"
                  fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
                </svg>
              </button>
              <div v-if="subMenuOpen[item.id]" class="pl-6 border-l-2 border-blue-100">
                <a v-for="subItem in item.subMenu" :key="subItem.id" :href="subItem.path"
                  class="block px-4 py-2 text-sm text-gray-700 hover:bg-blue-50 hover:text-blue-600 transition-colors duration-200"
                  @click="toggleMenu">
                  {{ subItem.name }}
                </a>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';

const isScrolled = ref(false);
const isMenuOpen = ref(false);
const subMenuOpen = reactive({});

// 菜单数据
const menuItems = [
  { id: 1, name: '关于我', path: '#about', hasSubMenu: false },
  { id: 2, name: '项目作品',path: '/project', hasSubMenu: false },
  { id: 3, name: '文章', path: '#', hasSubMenu: false },
  { id: 4, name: '资源', path: '/resource', hasSubMenu: false }
];

// 切换移动端主菜单
const toggleMenu = () => {
  isMenuOpen.value = !isMenuOpen.value;
};

// 切换移动端子菜单
const toggleSubMenu = (menuId) => {
  subMenuOpen[menuId] = !subMenuOpen[menuId];
};

onMounted(() => {
  // 初始化子菜单状态
  menuItems.forEach(item => {
    if (item.hasSubMenu) {
      subMenuOpen[item.id] = false;
    }
  });

  // 滚动监听逻辑
  const handleScroll = () => {
    isScrolled.value = window.scrollY > 10;
  };

  window.addEventListener('scroll', handleScroll);
  return () => window.removeEventListener('scroll', handleScroll);
});
</script>

<style scoped>
/* 下拉菜单动画 */
.group .absolute {
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
}
</style>